<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电子签名的使用</title>
<style type="text/css">
#canvas {
    border: 1px solid #ccc;
}
</style>
</head>

<body>
<div id="canvasDiv"></div>
<button id="btn_clear">Clear</button>
<button id="btn_submit">Submit</button>
<form action="./Base64ToImages" method="post"><input
    type="hidden" name="imageData" id="imageData" /></form>

<img id="tempImage" src="" style="display: none;" alt="临时图片文件" />

<script language="javascript">
    var canvasDiv = document.getElementById('canvasDiv');
    var canvas = document.createElement('canvas');
    var canvasWidth = 600, canvasHeight = 400;
    var point = {};
    point.notFirst = false;

    canvas.setAttribute('width', canvasWidth);
    canvas.setAttribute('height', canvasHeight);
    canvas.setAttribute('id', 'canvas');
    canvasDiv.appendChild(canvas);

    if (typeof G_vmlCanvasManager != 'undefined') {

        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    var context = canvas.getContext("2d");

    canvas.addEventListener("mousedown", function(e) {
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        paint = true;
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw();
    });

    canvas.addEventListener("mousemove",
            function(e) {
                if (paint) {
                    addClick(e.pageX - this.offsetLeft, e.pageY
                            - this.offsetTop, true);
                    redraw();
                }
            });

    canvas.addEventListener("mouseup", function(e) {
        paint = false;
    });

    canvas.addEventListener("mouseleave", function(e) {
        paint = false;
    });

    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;

    function addClick(x, y, dragging) {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
    }

    function redraw() {
        //canvascanvas.width = canvas.width; // Clears the canvas

        context.strokeStyle = "#df4b26";
        context.lineJoin = "round";
        context.lineWidth = 5;

        while (clickX.length > 0) {
            pointpoint.bx = point.x;
            pointpoint.by = point.y;
            point.x = clickX.pop();
            point.y = clickY.pop();
            point.drag = clickDrag.pop();
            context.beginPath();
            if (point.drag && point.notFirst) {
                context.moveTo(point.bx, point.by);
            } else {
                point.notFirst = true;
                context.moveTo(point.x - 1, point.y);
            }
            context.lineTo(point.x, point.y);
            context.closePath();
            context.stroke();
        }
        /*
         for(var i=0; i < clickX.length; i++)
         {
         context.beginPath();
         if(clickDrag[i] && i){
         context.moveTo(clickX[i-1], clickY[i-1]);
         }else{
         context.moveTo(clickX[i]-1, clickY[i]);
         }
         context.lineTo(clickX[i], clickY[i]);
         context.closePath();
         context.stroke();
         }
         */
    }
    var clear = document.getElementById("btn_clear");
    var submit = document.getElementById("btn_submit");
    clear.addEventListener("click", function() {
        canvascanvas.width = canvas.width;
    });

    submit.addEventListener("click", function() {
        //获取当前页面的信息，在当前页面的img下展示
        var image = document.getElementById("tempImage");
        image.src = canvas.toDataURL("image/png");
        document.getElementById("imageData").value = canvas
                .toDataURL("image/png");

        image.style = "display:block;";
        //获取canvas的数据格式如下
        alert(canvas.toDataURL("image/png"));
        //提交表单数据信息
        document.forms[0].submit();
    });
</script>

</body>
</html>  
